import { div } from "prelude-ls";
import React from "react";
import Board from "./components/Board";
import "./Game.less";

export default class Game extends React.Component {
  state = {
    playerSwitch: true,
    historyList: [
      {
        name: "Go to game start",
        squares: Array(9).fill(null),
        playerSwitch: true,
        isGameOver: false,
      },
    ],
    currentList: Array(9).fill(null),
    isGameOver: false,
    clickedHistoryItemIndex: null, // 点了历史列表后，再点击棋盘会清除历史列表
  };

  handleClick(i) {
    let {
      playerSwitch,
      currentList,
      isGameOver,
      historyList,
      clickedHistoryItemIndex,
    } = this.state;
    // 判断是否是空白区
    if (!currentList[i] && !isGameOver) {
      currentList[i] = playerSwitch ? "X" : "O";

      let isGameOverNext = this.isWinner(currentList);
      let playerSwitchNext = !playerSwitch;

      // 是否点击过历史列表
      if (clickedHistoryItemIndex === 0 || clickedHistoryItemIndex > 0) {
        historyList = historyList.slice(0, clickedHistoryItemIndex + 1);
      }

      historyList.push({
        name: `Go to move #${historyList.length}`,
        squares: [...currentList],
        playerSwitch: playerSwitchNext,
        isGameOver: isGameOverNext,
      });
      console.log("historyList-------------", historyList);
      this.setState({
        playerSwitch: playerSwitchNext,
        currentList,
        isGameOver: isGameOverNext,
        historyList,
        clickedHistoryItemIndex: null, // 恢复未点击过历史列表的默认值
      });
    }
  }

  // 判断是否获胜
  isWinner(currentList) {
    let isGameOver = false;
    currentList.some((item, i) => {
      // 横
      if (
        i % 3 === 0 &&
        currentList[i] !== null &&
        currentList[i] === currentList[i + 1] &&
        currentList[i] === currentList[i + 2]
      ) {
        isGameOver = true;
        return true;
      }
      // 竖
      if (
        [0, 1, 2].includes(i) &&
        currentList[i] !== null &&
        currentList[i] === currentList[i + 3] &&
        currentList[i] === currentList[i + 6]
      ) {
        isGameOver = true;
        return true;
      }
      // 对角线
      if (
        currentList[4] !== null &&
        ((currentList[4] === currentList[0] &&
          currentList[4] === currentList[8]) ||
          (currentList[4] === currentList[2] &&
            currentList[4] === currentList[6]))
      ) {
        isGameOver = true;
        return true;
      }
      return false;
    });
    return isGameOver;
  }

  review(historyItem, i) {
    this.setState({
      currentList: [...historyItem.squares],
      playerSwitch: historyItem.playerSwitch,
      isGameOver: historyItem.isGameOver,
      clickedHistoryItemIndex: i,
    });
  }

  render() {
    const { currentList, playerSwitch, isGameOver, historyList } = this.state;
    return (
      <div className="game">
        <div className="game-board">
          <Board squares={currentList} onClick={(i) => this.handleClick(i)} />
        </div>
        <div className="game-info">
          {isGameOver && (
            <div className="status">
              {!playerSwitch ? "Winner: X" : "Winner: O"}
            </div>
          )}
          {!isGameOver && (
            <div className="status">
              {playerSwitch ? "Next player: X" : "Next player: O"}
            </div>
          )}
          <div className="historyList">
            {historyList.map((historyItem, i) => {
              return (
                <button
                  className="historyItem"
                  key={i}
                  onClick={this.review.bind(this, historyItem, i)}
                >
                  {historyItem.name}
                </button>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}
